<script setup lang="ts">
const props = defineProps<{
  // 高度
  name: String;
  value: Number;
  unit: String
}>()
</script>

<template>
  <div class="info-single-class">
    <p class="info-single-name">{{ props.name }}</p>
    <p class="info-single-value">{{ props.value }}<span>{{ props.unit }}</span></p>
  </div>
</template>

<style scoped lang="stylus">
.info-single-class {
  width: 200px;
  height: 68px;
}
.info-single-name {
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  font-family: DINPro;
  height: 23px;
}
.info-single-value {
  font-size: 32px;
  font-weight: 600;
  color: #000000;
  font-family: DINPro;
  height: 45px;
  line-height: 45px;
  span {
    display: inline-block;
    font-size: 24px;
    font-weight: 500;
    padding-left: 3px;
  }
}
</style>